<template>
  <div>
    <a-space direction="vertical">
      <a-input
        v-model:value="value"
        placeholder="Basic usage"
      />
      <a-input
        prefix="￥"
        suffix="RMB"
        v-model:value.lazy="value1"
        autofocus
        placeholder="Lazy usage"
      />
      <a-textarea
        v-model:value="value2"
        placeholder="Autosize height based on content lines"
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
      <a-input-search
        placeholder="input search text"
        style="width: 200px"
        size="large"
      />
      <a-input-search
        placeholder="input search text"
        style="width: 200px"
      >
        <template #enterButton>
          <a-button>Custom自定义1111...</a-button>
        </template>
      </a-input-search>
      <a-input-search
        v-model:value="value"
        placeholder="input search loading deault"
        loading
        enter-button
      />
    </a-space>
    <a-input-group size="large">

      <a-input
        v-model:value="value1"
        style="width: 20%"
      />

      <a-input
        v-model:value="value2"
        style="width: 20%"
      />

      <a-input
        v-model:value="value2"
        style="width: 20%"
      />

    </a-input-group>
    <a-input-group>
      <a-input
        v-model:value="value1"
        style="width: 20%"
      />

      <a-input
        v-model:value="value2"
        style="width: 30%;margin-left:10px"
      />
    </a-input-group>
    <a-input
      v-model:value="value1"
      style="width: 20%"
    />
    <a-input-group compact>
      <a-select
        v-model:value="value3"
        style="width:200px"
      >
        <a-select-option value="Zhejiang">Zhejiang</a-select-option>
        <a-select-option value="Jiangsu">Jiangsu</a-select-option>
      </a-select>
      <a-input
        v-model:value="value4"
        style="width: 50%"
      />
    </a-input-group>
    <a-input-group compact>
      <a-input
        v-model:value="value7"
        style="width: 20%"
      />
      <a-date-picker
        v-model:value="value8"
        style="width: 50%"
      />
    </a-input-group>
    <a-input-group compact>
      <a-select v-model:value="value11">
        <a-select-option value="1">Between</a-select-option>
        <a-select-option value="2">Except</a-select-option>
      </a-select>
      <a-input
        v-model:value="value12"
        style="width: 100px; text-align: center"
        placeholder="Minimum"
      />
      <a-input
        v-model:value="value13"
        class="site-input-split"
        style="width: 30px; border-left: 0; pointer-events: none"
        placeholder="~"
        disabled
      />
      <a-input
        v-model:value="value14"
        class="site-input-right"
        style="width: 100px; text-align: center"
        placeholder="Maximum"
      />
    </a-input-group>
    <a-input-group compact>
      <a-input
        v-model:value="value20"
        style="width: calc(100% - 200px)"
      />
      <a-tooltip title="copy git url">
        <a-button>
          copy
        </a-button>
      </a-tooltip>
    </a-input-group>
    <a-input
      v-model:value="value1"
      addon-before="Http://"
      addon-after=".com"
    />
    <a-input
      v-model:value="value2"
      allow-clear
      show-count
      :maxlength="20"
    >
      <template #addonBefore>
        <a-select
          v-model:value="value3"
          style="width: 90px"
        >
          <a-select-option value="Http://">Http://</a-select-option>
          <a-select-option value="Https://">Https://</a-select-option>
        </a-select>
      </template>
      <template #addonAfter>
        <a-select
          v-model:value="value4"
          style="width: 80px"
        >
          <a-select-option value=".com">.com</a-select-option>
          <a-select-option value=".jp">.jp</a-select-option>
          <a-select-option value=".cn">.cn</a-select-option>
          <a-select-option value=".org">.org</a-select-option>
        </a-select>
      </template>
    </a-input>
    <a-textarea
      :bordered="false"
      v-model:value="value2"
      show-count
      :maxlength="100"
    />
    <a-input-password
      v-model:value="value3"
      placeholder="input password"
      :visibility-toggle="false"
    />
    <a-space>
      <a-input-password
        v-model:value="value4"
        v-model:visible="visible"
        placeholder="input password"
      />
      <a-button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</a-button>
    </a-space>
    <br>
    <a-textarea
      style="width: 200px;"
      v-model:value="value"
      placeholder="Basic usage"
      :rows="4"
      :maxlength="2"
    />
    <br>

    <a-textarea
      style="width: 200px;"
      :rows="4"
      v-model:value="value"
      placeholder="Basic usage"
      :maxlength="100"
    />
    <a-input status="error" placeholder="Error" />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      value9: '',
      value10: '',
      value11: '',
      value12: '',
      value13: '',
      value14: '',
      value15: '',
      value16: '',
      value17: '',
      value18: '',
      value19: '',
      value20: '',
      value21: '',
      visible: false,





    }
  },
  // watch: {
  //   value: { //这里是要监听的变量名
  //     handler(newValue, oldValue) { //这里的第一个参数是改变后的值，第二个参数是原来的值
  //       console.log('改后的值是：' + newValue)
  //       console.log('原来的值是：' + oldValue)
  //     }
  //   },
  //   value1: { //这里是要监听的变量名
  //     handler(newValue, oldValue) { //这里的第一个参数是改变后的值，第二个参数是原来的值
  //       console.log('改后的值是：' + newValue)
  //       console.log('原来的值是：' + oldValue)
  //     }
  //   }
  // },

  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
